<template>
  <div class="my-border">
    <el-card class="stats-card" style="height: 140px;"> <!-- 减小卡片的上下长度 -->
      <div class="stats-row">
        <div class="stats-item">
          <p class="stats-label">反馈总数</p>
          <p class="stats-value">{{totalFeekback}}</p>
        </div>
        <div class="stats-dotted-line"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">草稿反馈数</p>
          <p class="stats-value">{{draftFeekback}}</p>
        </div>
        <div class="stats-dotted-line2"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">未查看反馈数</p>
          <p class="stats-value">{{uncheckedFeekback}}</p>
        </div>
        <div class="stats-dotted-line3"></div> <!-- 虚线分割 -->
        <div class="stats-item">
          <p class="stats-label">已查看反馈数</p>
          <p class="stats-value">{{checkedFeekback}}</p>
        </div>
      </div>
    </el-card>
      <el-select v-model="selectedStatus" clearable placeholder="选择查看状态" class="my-button2">
        <el-option
            v-for="status in statuses"
            :key="status.value"
            :label="status.label"
            :value="status.value"
        ></el-option>
      </el-select>
    <el-button @click="search" class="my-button">查询</el-button>
    <el-button class="refresh" @click="reload1" >显示所有</el-button>
    <el-button style="float: right; margin-top: 15px" type="primary" @click="goToEdit">前往填写新反馈</el-button>
    <el-table :data="tableData"
        tooltip-effect="dark"
        style="width: 100%; margin-top: 10px">
      <el-table-column prop="id"    label="反馈id" v-if="false"></el-table-column>
      <el-table-column fixed    prop="createTime"    label="反馈创建时间">
        <template slot-scope="scope">
          <span>{{scope.row.createTime.substring(0, 10)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="aid"    label="反馈活动id" v-if="false"></el-table-column>
      <el-table-column prop="aname"    label="反馈活动名称">
        <template slot-scope="scope">
          <span v-if="activities.length>0">{{getActivityName(scope.row.aid)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="反馈内容" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div v-html="scope.row.description"></div>
        </template>
      </el-table-column>
      <el-table-column prop="status"    label="反馈查看状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0" style="font-size: 15px;">未查看</span>
          <span v-else-if="scope.row.status==1" style="font-size: 15px;">已查看</span>
          <span v-else-if="scope.row.status==2" style="font-size: 15px;">草稿(未提交)</span>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"   label="操作">
        <template slot-scope="scope">
          <el-button @click="handleOpen(scope.row.id)" type="text" size="medium">查看详情</el-button>
          <el-button @click="handleOpen2(scope.row.id)" type="text" size="medium">添加附件</el-button>
          <el-button v-if="scope.row.status==2" @click="handleOpen1(scope.row.id)" type="text" size="medium">修改内容</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style=""
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="pageSizes"
        :page-size="params.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="params.total">
    </el-pagination>

    <el-dialog
        title="反馈详情查看"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose">
      <el-descriptions :column="2" class="form" border>
        <el-descriptions-item label="反馈人账号" >{{this.userAccount}}</el-descriptions-item><br>
        <el-descriptions-item label="反馈人" >{{this.name}}</el-descriptions-item><br>
        <el-descriptions-item label="反馈ID" >{{this.feekback.id}}</el-descriptions-item><br>
        <el-descriptions-item label="反馈创建时间">{{this.feekback.createTime.substring(0,10)}}</el-descriptions-item><br>
        <el-descriptions-item label="反馈活动id">{{this.feekback.aid}}</el-descriptions-item><br>
        <el-descriptions-item label="反馈活动名称">{{this.activity.name}}</el-descriptions-item><br>
        <el-descriptions-item label="活动类型">
          <template>
            <span v-if="this.activity.type==0" style="font-size: 15px;">线上活动</span>
            <span v-else-if="this.activity.type==1" style="font-size: 15px;">校内活动</span>
            <span v-else-if="this.activity.type==2" style="font-size: 15px;">校外活动</span>
          </template>
        </el-descriptions-item><br>
        <el-descriptions-item label="反馈查看状态">
          <template>
            <span v-if="this.feekback.status==0" style="font-size: 15px;">未查看</span>
            <span v-else-if="this.feekback.status==1" style="font-size: 15px;">已查看</span>
            <span v-else-if="this.feekback.status==2" style="font-size: 15px;">草稿(未提交)</span>
          </template>
        </el-descriptions-item><br>
        <el-descriptions-item label="反馈描述">
          <div v-html="this.feekback.description"></div>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1" class="form" border>
        <el-descriptions-item label="反馈附件" >
<!--          <img v-for="(url, index) in selectFile" :key="index"-->
<!--               :src="url" style="width: auto;max-height: 200px">-->
          <div v-for="file in selectFile" :key="file.name">{{file.name}}</div>
        </el-descriptions-item><br>
      </el-descriptions>
<!--      <img v-for="(url, index) in selectFile" :key="index"-->
<!--           :src="url" style="max-height: 1000px; max-width: 500px; object-fit: cover" ><br>-->
      <el-button type="primary" class="my" @click="dialogVisible = false">确 定</el-button>
    </el-dialog>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible1"
        width="900px"
        :before-close="handleClose1">
      <el-form :model="feekback">
        <el-form-item label="反馈内容修改,并提交"><br>
          <vue-editor v-model="feekback.description" placeholder="请输入活动描述" style="width: 850px;height: 150px"></vue-editor>
        </el-form-item>
      </el-form>
    <el-button @click="saveDraft(feekback)">保存为草稿</el-button>
    <el-button type="primary" @click="handleEdit(feekback)">确定并提交</el-button>
    </el-dialog>

    <el-dialog
        title="反馈附件添加"
        :visible.sync="dialogVisible2"
        width="30%"
        :before-close="handleClose1">
      <el-upload
          class="upload-demo"
          action="/api/file/upload"
          :on-change="handleChange"
          :on-remove="handleRemove"
          :file-list="fileList"
          :limit="3"
          :on-success="uploadSuccess"
          :before-upload="beforeUpload">
        <el-button size="medium" type="primary" style="margin-bottom: 30px">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传最多3个文件，且不超过5mb</div>
      </el-upload>
      <el-button size="medium" @click="saveUrlToDatabase" style="margin-top: 10px">确定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {
  findAllFeedByUid,
  getAct,
  getAllActivity,
  getAllByUidPage,
  getFeekbackById,
  getUser, saveFeedUrl, searchByStatus1, selectFeedFile,
  updateDesc
} from '../../../../api/feekback'
import {mapGetters} from 'vuex'
import {upload} from '../../../../api/api'
import {VueEditor} from 'vue2-editor'

export default {
  inject: ['reload'],
  name: 'viewfeekback',
  components: {
    VueEditor
  },
  data () {
    return {
      params: {
        page: 1,
        size: 5,
        total: 100
      },
      pageSizes: [5, 8, 10, 20],
      tableData: [],
      activities: [],
      dialogVisible: false,
      dialogVisible1: false,
      feekback: {
        id: '',
        createTime: '',
        uid: '',
        description: '',
        status: '',
        aid: ''
      },
      name: '',
      activity: {
        name: '',
        type: ''
      },
      id: '',
      selectedStatus: '',
      methodSelect: 1,
      dialogVisible2: false,
      fileUrl: [],
      fileList: [],
      selectFile: [],
      feekbackList: [],
      fileName: [],
      compareDesc: ''
    }
  },
  methods: {
    upload,
    findAllByUidPage () {
      getAllByUidPage(this.userId, this.params.page, this.params.size).then((res) => {
        this.tableData = res.data
        this.originTableData = res.data
        // console.log(this.tableData)
        this.params.total = res.total
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.params.size = val
      if (this.methodSelect === 1) {
        this.findAllByUidPage()
      } else {
        this.search()
      }
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
      if (this.methodSelect === 1) {
        this.findAllByUidPage()
      } else {
        this.search()
      }
    },
    getAllActivity () {
      getAllActivity(this.userId).then((res) => {
        this.activities = res
      })
    },
    getActivityName (aid) {
      const activity = this.activities.find(activity => activity.id === aid)
      return activity ? activity.name : ''
    },
    handleEdit (feekback) {
      updateDesc(this.id, feekback.description, 0)
      this.dialogVisible1 = false
      this.reload()
    },
    handleOpen (id) {
      this.dialogVisible = true
      getFeekbackById(id).then((res) => {
        this.feekback.id = res.id
        this.feekback.aid = res.aid
        this.feekback.status = res.status
        this.feekback.createTime = res.createTime
        this.feekback.description = res.description
      })
      getUser(this.userId).then((res) => {
        this.name = res.name
      })
      getAct(id).then((res) => {
        this.activity.name = res.name
        this.activity.type = res.type
      })
      selectFeedFile(id, this.userId).then((res) => {
        this.selectFile = res
        console.log(this.selectFile)
      })
    },
    handleClose () {
      this.dialogVisible = false
    },
    handleClose1 () {
      if (this.dialogVisible1 === true) {
        this.$confirm('未修改或未保存反馈内容，是否退出？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dialogVisible1 = false
          this.$message({
            type: 'warning',
            message: '内容未修改'
          })
        }).catch(() => {
          this.$message({
            type: 'success',
            message: '请继续修改'
          })
        })
      }
      this.dialogVisible2 = false
    },
    handleOpen1 (id) {
      this.dialogVisible1 = true
      this.id = id
      getFeekbackById(id).then((res) => {
        this.feekback.description = res.description
        this.compareDesc = this.feekback.description
      })
    },
    search () {
      this.methodSelect = 0
      searchByStatus1(this.selectedStatus, this.params.page, this.params.size).then((res) => {
        this.tableData = res.data
        this.params.total = res.total
      })
    },
    reload1 () {
      this.reload()
    },
    handleOpen2 (id) {
      this.dialogVisible2 = true
      this.id = id
    },
    uploadSuccess (response, file) {
      console.log('上传成功', response, file)
      console.log(this.fileList)
    },
    saveUrlToDatabase () {
      if (this.fileList.length < 1) {
        this.$message.error('无文件，请上传至少一个文件')
        return
      }
      this.dialogVisible2 = false
      this.fileList.forEach((item) => {
        this.fileUrl.push({uid: this.userId, fid: this.id, url: item.response.url, name: item.name})
      })
      saveFeedUrl(this.fileUrl).then((res) => {
        this.fileUrl = []
        this.fileList = []
      }).catch(error => {
        console.log('保存失败', error)
      })
    },
    handleChange (file, fileList) {
      this.fileList = fileList
    },
    handleRemove (file, fileList) {
      this.fileList = fileList
    },
    beforeUpload (file) {
      const fileSize = file.size / 1024 / 1021 < 5
      if (!fileSize) {
        this.$message.error('上传文件大小不能超过 5MB!')
      }
      return fileSize
    },
    selectUrl (fid, uid) {
      selectFeedFile(fid, uid).then((res) => {
        this.selectFile = res
      })
    },
    goToEdit () {
      this.$router.push('../feekback/editfeekback')
    },
    findAllFeedback () {
      findAllFeedByUid(this.userId).then((res) => {
        this.feekbackList = res
      })
    },
    saveDraft (feekback) {
      updateDesc(this.id, feekback.description, 2)
      this.dialogVisible1 = false
      this.reload()
    }
  },
  computed: {
    ...mapGetters({
      userType: 'user/getUserRole',
      userAccount: 'user/getUserAccount',
      userId: 'user/getUserId'
    }),
    roleName () {
      return this.getRoleName(this.userType)
    },
    statuses () {
      return [
        {value: '', label: '查看状态'},
        {value: '0', label: '未查看'},
        {value: '1', label: '已查看'},
        {value: '2', label: '草稿'}
      ]
    },
    totalFeekback () {
      return this.feekbackList.length
    },
    draftFeekback () {
      return this.feekbackList.filter(data => data.status === 2).length
    },
    checkedFeekback () {
      return this.feekbackList.filter(data => data.status === 1).length
    },
    uncheckedFeekback () {
      return this.feekbackList.filter(data => data.status === 0).length
    }
  },
  mounted () {
    this.findAllByUidPage()
    this.getAllActivity()
    this.findAllFeedback()
  }
}
</script>

<style scoped>
/*最外层透明*/
/deep/ .el-table, /deep/ .el-table__expanded-cell{
  background-color: transparent;
}
/* 表格内背景颜色 */
/deep/ .el-table th,
/deep/ .el-table tr,
/deep/ .el-table td {
  background-color: transparent;
}

.my {
  margin-top: 20px;
  place-items: center;
}
.refresh {
  margin-left: 14px;
}
.stats-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 20px; /* 减小卡片的上下长度 */
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  background-color: #f5f7fa;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 200px; /* 调整字段之间的间距 */
  position: relative;
}

.stats-item {
  text-align: center;
}

/* 新增样式用于虚线 */
.stats-dotted-line {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(20% - 1px); /* 将虚线置于两字段之间的中间位置 */
}

.stats-dotted-line2 {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px); /* 将虚线置于两字段之间的中间位置 */
}
.stats-dotted-line3 {
  position: absolute;
  height: 100%;
  width: 1px; /* 虚线的宽度 */
  background-image: linear-gradient(to bottom, black 20%, rgba(255, 255, 255, 0) 0%);
  background-position: 50%;
  background-size: 1px 10px; /* 控制虚线的高度和间距 */
  background-repeat: repeat-y;
  top: 0;
  bottom: 0;
  left: calc(80% - 1px); /* 将虚线置于两字段之间的中间位置 */
}
.stats-label {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px; /* 调整字段与数字之间的间距 */
}

.stats-value {
  font-size: 32px;
  font-weight: bold;
}
.my-border {
  padding: 10px;
}
.my-button2 {
  margin-top: 15px;
}
.my-button {
  margin-top: 15px;
  margin-left: 15px;
}
.el-table th.el-table__cell{
  background-color: transparent;
}
/deep/ .el-table__header{
  background-color: transparent;
}
.el-table__header{
  background-color: transparent;
}
</style>
